
<template>
    <div class="basic-command">
        <p>这是基本命令</p>
        <h1>{{msg}}</h1>
        <h1 v-html="htmlSpan"></h1>
    
        <img src="//www.baidu.com/img/baidu_sylogo1.gif" />
    
        <img v-bind:src="imgUrl" />
        <img :src="imgUrl" />
    
        <button v-on:click="btnAction">点击</button>
        <button @click="btnAction">简写点击</button>
    
        <p v-if="isActive">v-if true truetruetruetruetruetruetrue</p>
        <p v-else>v-if false falsefalsefalsefalsefalsefalsefalse</p>
        <p v-show="isActive">v-show  afaadflasfl</p>
        <button @click="switchActive">切换状态</button>
    
        <p v-if="num == 0">num 为 0</p>
        <p v-else-if="num == 1">num 为 1</p>
        <p v-else>num 非 0 非 1</p>
        <button @click="changeNum(0)">修改为0</button>
        <button @click="changeNum(1)">修改为1</button>
        <button @click="changeNum(3)">修改为3</button>
        <!-- <div :style="styleStr">
            test
        </div>
    
        <div :class="classStr">
            111
        </div> -->
    </div>
    
    </template>
    
    <script>
    export default {
        data(){
            return {
                msg: "hello world",
                htmlSpan: "<span>这是一个html插值</span>",
                imgUrl:"//www.baidu.com/img/baidu_sylogo1.gif",
                // styleStr:"color:red",
                // classStr: "box content"
                isActive: true,
                num: 0
            }
        },
        methods:{
            btnAction() {
                console.log(123);
            },
            switchActive(){
                this.isActive = !this.isActive
                console.log('this.isActive',this.isActive);
            },
            changeNum(number){
                this.num = number
                console.log('this.num',this.num);
    
            }
        }
    }
    </script>
    
    <style scoped>
    .box {
        color: red;
    }
    .content {
        background: yellow;
    }
    .basic-command {
        text-align: center;
    }
    </style>